{extend name='./layout/_content_open'}
{block name='content_open'}
<div class="panel-body">
    <form action="#" method="POST" class="form-horizontal" role="form" id="edit-form">
        <input type="hidden" id="id" name="id" value="{$menu->id}">
        <div class="form-group">
            <label class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name"
                       placeholder="输入菜单名称" required data-bv-notempty-message="菜单名称不为空"
                       pattern="^.{2,20}$" data-bv-regexp-message="菜单名称在两到二十个字符之间"
                       value="{$menu->name}"/>
            </div>
        </div>
        <div class="form-group">
            <label for="icon" class="col-sm-2 control-label">菜单图标</label>
            <div class="col-sm-8">
                <input type="text" id="icon" name="icon" value="{$menu->icon}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">父级菜单</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="parentMenuName" name="parentMenuName"
                       placeholder="不选择默认为顶级菜单" readonly
                       value="{$parent_menu_name}"/>
                <input type="hidden" name="parent_id" id="parentId" value="{$menu.parent_id}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">模块名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="moduleName" name="module_name"
                       placeholder="输入模块名称" required data-bv-notempty-message="模块名称不为空"
                       pattern="^.{2,10}$" data-bv-regexp-message="模块名称在两到十个字符之间"
                       value="{$menu->module_name}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">控制器名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="actionName" name="action_name"
                       placeholder="输入控制器名称" required data-bv-notempty-message="控制器名称不为空"
                       pattern="^.{2,10}$" data-bv-regexp-message="控制器名称在两到十个字符之间"
                       value="{$menu->action_name}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">方法名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="functionName" name="function_name"
                       placeholder="输入方法器名称" required data-bv-notempty-message="方法名称不为空"
                       pattern="^.{2,20}$" data-bv-regexp-message="方法名称在两到二十个字符之间"
                       value="{$menu.function_name}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">是否菜单</label>
            <div class="col-sm-8">
                <div class="radio">
                    {if($menu->is_menu == 0)}
                    <label>
                        <input type="radio" required name="is_menu" id="isMenu0" value="0"
                               data-bv-notempty-message="请选择是否菜单" checked/>
                        否
                    </label>
                    <label>
                        <input type="radio" required name="is_menu" id="isMenu1" value="1"
                               data-bv-notempty-message="请选择是否菜单"/>
                        是
                    </label>
                    {else}
                    <label>
                        <input type="radio" required name="is_menu" value="0"
                               data-bv-notempty-message="请选择是否菜单"/>
                        否
                    </label>
                    <label>
                        <input type="radio" required name="is_menu" value="1"
                               data-bv-notempty-message="请选择是否菜单" checked/>
                        是
                    </label>
                    {/if}
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">排序</label>
            <div class="col-sm-8">
                <input type="number" class="form-control" id="sort" name="sort"
                       placeholder="排序越大越往后" required data-bv-notempty-message="排序不为空"
                       pattern="^\d{1,3}$" data-bv-regexp-message="排序是正整数，一到三位"
                       value="{$menu->sort}"/>
            </div>
        </div>
    </form>
</div>
<div class="panel-footer">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

        </div>
        <div class="text-center col-xs-4 col-sm-4 col-md-4 col-lg-4">

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
            <button class="btn btn-success" id="btn-edit" onclick="view.submit();">修改</button>
            <button class="btn btn-warning" id="btn-canal" onclick="parent.view.close();">取消</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/js/fa_icons.js"></script>
<script type="text/javascript">
    $(function () {
        view.init();
        ztree.init();
    });
    var view = {
        id: '{$menu->id}',
        init: function () {
            $('#icon').fontIconPicker({
                source: fa_icons,
                theme: 'fip-darkgrey'
            });
            $('#edit-form').bootstrapValidator({
                message: '值不能为空',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                }
            });

            $('#edit-form').on('submit', function () {
                return false;
            });
            $('#parentMenuName').on('focus', function () {
                $('#modal-parent-menu').modal();
            });
        },
        submit: function () {
            $('#edit-form').data('bootstrapValidator').validate();
            var b = $('#edit-form').data('bootstrapValidator').isValid();
            if (!b) {
                return false;
            }
            $('#btn-edit').attr('disabled', 'disabled');
            $.ajax({
                url: "{:url('/sys/menu/edit')}",
                type: 'post',
                dataType: 'json',
                data: $('#edit-form').serialize(),
                success: function (data) {
                    console.log(data);
                    if (data.status) {
                        layer.msg(data.msg, {icon: 1});
                        //wpgaci.goUrl("{:url('/sys/menu/index')}", 1.5);
                        //parent.view.table.bootstrapTreeTable('refresh');
                        parent.window.location.reload();
                        setTimeout(function () {
                            parent.view.close();
                        }, 1500);
                    } else {
                        layer.msg(data.msg, {icon: 2});
                        $('#btn-edit').removeAttr('disabled');
                    }
                },
                error: function () {
                    layer.msg('网络错误，请稍后再试', {icon: 5});
                    $('#btn-edit').removeAttr('disabled');
                }
            });
        }
    };

    var ztree = {
        tree: null,
        dataUrl: "{:url('/sys/menu/get_menus')}",
        init: function () {
            this.tree = $.fn.zTree.init($("#ztree"), this.treeSetting());
        },
        treeSetting: function () {
            var that = this;
            return {
                async: {
                    enable: true,
                    type: 'get',
                    url: that.dataUrl,
                    autoParam: ["id"],
                    dataFilter: that.dataFilter
                },
                callback: {
                    onClick: that.onClick,
                    onExpand: that.onExpand
                }, data: {
                    simpleData: {
                        enable: true
                    },
                    keep: {
                        parent: true
                    }
                },
                check: {
                    enable: false
                }
            };
        },
        dataFilter: function (treeId, parentNode, ret) {
            //当后台获取的数据与在ztree所需要的数据不符时，就需要这个了
            var data = [];
            $(ret).each(function (i, item) {
                data.push({
                    name: item.name,
                    id: item.id,
                    pId: item.parent_id,
                    isParent: item.has_child,
                    obj: item
                });
            });
            return data;
        },
        onClick: function (event, treeId, treeNode, clickFlag) {
            if (view.id == treeNode.id) {
                layer.msg('父级菜单不能选择自己', {icon: 2});
                return false;
            }
            $('#parentMenuName').val(treeNode.name);
            $('#parentId').val(treeNode.id);
            $('#modal-parent-menu').modal('hide');
        }
    };
</script>

<!--选择父级菜单-->
<div class="modal animated rollIn" id="modal-parent-menu">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">选择父级菜单</h4>
            </div>
            <div class="modal-body">
                <div class="ztree" id="ztree"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
{/block}